<template>
    <div class="add">
        <input type="text" name="" id="" v-model="msg" @keyup.enter="saveCalendar">
        <button @click="saveCalendar">添加</button>
    </div>
</template>

<script>
import {nanoid} from 'nanoid'
    export default {
        name:'addCalendar',
        data() {
            return {
                msg:''
            }
        },
        methods:{
            saveCalendar(){
                if(this.msg.trim()==''){
                    alert('不能输入空的日程')
                    return
                }
                let info={
                    id:nanoid(),
                    msg:this.msg
                }
                if(localStorage.info===undefined){
                    localStorage.info=JSON.stringify([info])
                }else{
                    let tempArr=JSON.parse(localStorage.info)
                    //如果日程已经存在，则提示
                    for(var i=0;i<tempArr.length;i++){
                        if(tempArr[i].msg==this.msg){
                            alert('日程已存在')
                            break;
                        }
                    }
                    if(i==tempArr.length){
                        tempArr.push(info)
                        localStorage.info=JSON.stringify(tempArr)
                    }

                    
                }
                this.msg=''
                this.$emit('getMessage')
            }
        }
    }
</script>

<style lang="less" scoped>
.add{
    width: 100vw;
    display: flex;
    justify-content: space-around;
    input{
        flex:3;
        margin: 10px;
    }
    button{
        flex: 1;
        margin: 10px;
    }
}
</style>